<template>
  <div>
    <headNav title="校园一卡通" ></headNav>
    <div class="flexHeight " >
      <div class="bigDivCss" v-for="(val, index) in oneCardList" :key="index"  >
        <div class="leftImg" >
          <img v-if="!val.portraitImgUrl" src="@/assets/img/default_heads.png" alt=""  >
          <img v-else :src="val.portraitImgUrl" alt=""  >
        </div>
        <div class="flexHeight middleDiv" >
          <span class="titleSpan" >{{val.studentName}}</span>
          <span>消费卡号：{{val.cardNo}}</span>
          <div class="flexAlign" >
            <img src="@/assets/img/my/money.png" alt="" >
            <span>余额：</span>
            <span class="moneyCss" v-if="val.cardNo" >{{val.accountBalance}}元</span>
          </div>
        </div>
        <div class="flexHeight belowCss" v-if="val.cardNo" >
          <button type="default" @click="jumpClick('卡号充值', val)" >充值</button>
          <span @click="detailedClick(val)" style="margin-bottom: 0.1rem;" >账户明细  ></span>
          <span @click="jumpClick('编辑卡号', val)" >编辑卡号  ></span>
        </div>
        <div class="flexHeight belowCss" v-if="!val.cardNo" >
          <button type="default" style="background: #14CC8D;" @click="jumpClick('绑定卡号', val)" >去绑定</button>
        </div>
      </div>
    </div>


    <tip></tip>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import tip from './tip.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { getOnCardListApi } from '@/api/myNewApi'
export default {
  name: 'oneCardList',
  components: {
    headNav, tip
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      roleCode: state => state.user.roleCode,
      schoolId: state => state.user.schoolId
    })
  },
  data () {
    return {
      oneCardList: []
    }
  },
  methods: {
    // 账户明细点击事件
    detailedClick (val) {
      localStorage.bindingRequired = JSON.stringify(val)
      this.$router.push('/schoolAccount/orderInfo')
    },
    // 点击去绑定触发事件
    jumpClick (e, val) {
      localStorage.operation = e
      localStorage.bindingRequired = JSON.stringify(val)
      if (e == '绑定卡号' || e == '编辑卡号') {
        this.$router.push('operation')
      } else {
        this.$router.push('/schoolAccount/recharge')
      }
      
    }
  },
  async mounted() {
    let res = await getOnCardListApi()
    this.oneCardList = res
    console.log(res)
  }
}
</script>

<style lang="less" scoped >
 .belowCss {
   width: 1.7rem;
   height: 100%;
   justify-content: center;
   align-items: center;
   font-size: 0.28rem;
   color: #128FEF;
   button {
     background: #128FEF;
     color: #FFF;
     width: 1.5rem;
     height: 0.55rem;
     border-radius: 0.28rem;
     font-size: 0.26rem;
     border: 0;
     margin-bottom: 0.2rem;
   }
 }

 .middleDiv {
   width: 3.8rem;
   height: 100%;
   font-size: 0.24rem;
   color: #666666;
   .titleSpan {
     font-size: 0.32rem;
     font-weight: 600;
     margin: 0.2rem 0 0.2rem 0;
     color: #000;
   }
   img {
     width: 0.25rem;
     height: 0.25rem;
     margin-right: 0.1rem;
   }
   .moneyCss {
     font-size: 0.32rem; color: #FF9900;
   }
   div {
     margin-top: 0.2rem;
   }
 }

.bigDivCss {
  width: 6.65rem;
  height: 2.2rem;
  background: #FFF;
  border-radius: 0.15rem;
  margin: 0.3rem 0 0 0.3rem;
  display: flex;
  .leftImg {
    width: 1rem;
    height: 100%;
    display: flex;
    justify-content: center;
    img {
      width: 0.6rem;
      height: 0.6rem;
      margin-top: 0.2rem;
      border-radius: 2rem;
    }
  }
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexHeight {
  display: flex;
  flex-direction: column;
}

.flexAlign {
  display: flex;
  align-items: center;
}

.flexEdge {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
